<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Sudo Slider | Captions demo</title>
	<meta http-equiv="content-type" content="text/html;charset=UTF-8" />    
	<link rel="STYLESHEET" type="text/css" href="../css/style.css">
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
	<script type="text/javascript" src="../js/jquery.sudoSlider.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){	
			var ajaximages = [
			    '../images/01.jpg', 
			    '../images/02.jpg', 
			    '../images/03.jpg', 
			    '../images/04.jpg', 
			    '../images/05.jpg'
			];
			var imagestext = [
			    'Just another beautiful sunset',
                'Mountains in the Alps',
                'Road and mountains in the Alps',
                'Behind another beautiful sunset',
                'A goat in norway'
			];
			var sudoSlider = $("#slider").sudoSlider({
                effect: "fade",
                responsive: false,
			    continuous:true,
			    ajax: ajaximages,
                ajaxLoad: function(t){
			        $(this)
			            .css("position","relative")
			            .append('<div class="caption" >' + imagestext[t-1] + '</div>');
			    },
			    beforeAnimation: function(t){
			        $(this).children('.caption').hide();
			    },
			    afterAnimation: function(t){
			        $(this).children('.caption').slideDown(400);
			    }
			});
		});
	</script>
	<style>
	.caption {
	    position:absolute;
	    bottom:0;
	    left:0;
	    width:100%;
	    text-align:center;
	    color:black;
	    background:white;
	    background:transparent;
	    background:rgba(255,255,255,0.7);
	    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#a3ffffff,endColorstr=#a3ffffff);
	    zoom: 1;
	}
	</style>



</head>
<body>
<div id="container">
	<h1>Sudo Slider jQuery Plugin - Captions demo</h1>
	<a href="http://webbies.dk/SudoSlider/help/#Settings-afterAnimation">afterAnimation & beforeAnimation in docs</a>
	<div style="position:relative;">
		<div id="slider"></div>
	</div>
	<h3>Usage</h3>
	<h4>Include the javascripts</h4>
	<pre>
&lt;script type="Text/Javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="../js/jquery.sudoSlider.min.js"&gt;&lt;/script&gt;</pre>
	<h4>The Javascript to start it.</h4>
	<pre>
&lt;script type="text/javascript" &gt;
    $(document).ready(function(){
        var ajaximages = [
            '../images/01.jpg',
            '../images/02.jpg',
            '../images/03.jpg',
            '../images/04.jpg',
            '../images/05.jpg'
        ];
        var imagestext = [
            'Just another beautiful sunset',
            'Mountains in the Alps',
            'Road and mountains in the Alps',
            'Behind another beautiful sunset',
            'A goat in norway',
        ];
        var sudoSlider = $("#slider").sudoSlider({
            effect: "fade",
            continuous:true,
            ajax: ajaximages,
            ajaxLoad: function(t){
                $(this)
                    .css("position","relative")
                    .append('&lt;div class="caption" &gt;' + imagestext[t-1] + '&lt;/div&gt;');
            },
            beforeAnimation: function(t){ 
                $(this).children('.caption').hide();	
            },
            afterAnimation: function(t){ 
                $(this).children('.caption').slideDown(400);
            }
        });
    });
&lt;/script&gt;</pre>
	<h4>The CSS</h4>
	<pre>
.caption {
    position:absolute;
    bottom:0;
    left:0;
    width:700px;
    height:25px;
    text-align:center;
    color:black;
    background:white;
    background:transparent;
    background:rgba(255,255,255,0.7);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#a3ffffff,endColorstr=#a3ffffff);
    zoom: 1;
}
</pre>
	<h4>The HTML</h4>
	<pre>
&lt;div id="slider" &gt;&lt;/div&gt;</pre>
</div>

<div style="width:728px;height:90px;margin:0 auto;">
	<script type="text/javascript">
		<!--
		google_ad_client = "pub-8170632875475442";
		/* Sudo Slider, lang horisontal */
		google_ad_slot = "0149025622";
		google_ad_width = 728;
		google_ad_height = 90;
		//-->
	</script>
	<script type="text/javascript"
	src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
	</script>
</div>
<script type="text/javascript">
    /* Google Analytics, please remove
     var _gaq = _gaq || [];
     _gaq.push(['_setAccount', 'UA-20484420-1']);
     _gaq.push(['_trackPageview']);

     (function() {
     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
     })();
     /* */
</script>
</body>
</html>